<template>
  <div class="dashboard-container">
    <div class="dashboard-header">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="6" v-for="(item, index) in statisticData" :key="index">
          <el-card shadow="hover" class="statistic-card">
            <div class="statistic-icon" :style="{ backgroundColor: item.color }">
              <el-icon><component :is="iconMap[item.icon]" /></el-icon>
            </div>
            <div class="statistic-content">
              <div class="statistic-title">{{ item.title }}</div>
              <div class="statistic-value">{{ item.value }}</div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div class="dashboard-main">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="24" :md="16">
          <el-card shadow="hover" class="chart-card">
            <template #header>
              <div class="card-header">
                <span>业务趋势</span>
                <el-radio-group v-model="timeRange" size="small">
                  <el-radio value="week">本周</el-radio>
                  <el-radio value="month">本月</el-radio>
                  <el-radio value="year">全年</el-radio>
                </el-radio-group>
              </div>
            </template>
            <div class="chart-container">
              <!-- 这里可以集成图表组件 -->
              <div class="chart-placeholder">
                <el-empty description="图表区域" />
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :md="8">
          <el-card shadow="hover" class="chart-card">
            <template #header>
              <div class="card-header">
                <span>业务分布</span>
              </div>
            </template>
            <div class="chart-container">
              <!-- 这里可以集成图表组件 -->
              <div class="chart-placeholder">
                <el-empty description="饼图区域" />
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <el-card shadow="hover" class="task-card">
        <template #header>
          <div class="card-header">
            <span class="header-title">待办任务</span>
            <el-button type="primary" size="small" plain>查看全部</el-button>
          </div>
        </template>
        <el-table :data="taskList" style="width: 100%" stripe border class="custom-table">
          <el-table-column prop="name" label="任务名称" />
          <el-table-column prop="status" label="状态" width="100">
            <template #default="scope">
              <el-tag :type="getTagType(scope.row.status)" effect="dark">{{
                scope.row.status
              }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="priority" label="优先级" width="100">
            <template #default="scope">
              <el-tag
                :type="
                  scope.row.priority === '高'
                    ? 'danger'
                    : scope.row.priority === '中'
                      ? 'warning'
                      : 'info'
                "
                effect="plain"
              >
                {{ scope.row.priority }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="deadline" label="截止日期" width="120" />
          <el-table-column fixed="right" label="操作" width="160">
            <template #default>
              <el-button link size="small">查看</el-button>
              <el-button link type="success" size="small">处理</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, markRaw } from 'vue'
import { Goods, ShoppingCart, User, Money } from '@element-plus/icons-vue'

// 图标映射
const iconMap = {
  Goods: markRaw(Goods),
  ShoppingCart: markRaw(ShoppingCart),
  User: markRaw(User),
  Money: markRaw(Money),
}

// 统计数据
const statisticData = [
  {
    title: '产品总数',
    value: '1,234',
    icon: 'Goods',
    color: '#67C23A',
  },
  {
    title: '订单总数',
    value: '5,678',
    icon: 'ShoppingCart',
    color: '#67C23A',
  },
  {
    title: '用户总数',
    value: '9,876',
    icon: 'User',
    color: '#67C23A',
  },
  {
    title: '总收入',
    value: '¥123,456',
    icon: 'Money',
    color: '#67C23A',
  },
]

// 时间范围
const timeRange = ref('month')

// 任务列表
const taskList = [
  {
    name: '审核新供应商申请',
    status: '待处理',
    priority: '高',
    deadline: '2023-06-15',
  },
  {
    name: '处理客户退款请求',
    status: '进行中',
    priority: '中',
    deadline: '2023-06-16',
  },
  {
    name: '更新产品库存信息',
    status: '已延期',
    priority: '高',
    deadline: '2023-06-10',
  },
  {
    name: '确认月度财务报表',
    status: '待处理',
    priority: '中',
    deadline: '2023-06-20',
  },
]

// 获取标签类型
const getTagType = (status) => {
  switch (status) {
    case '待处理':
      return 'info'
    case '进行中':
      return 'primary'
    case '已延期':
      return 'danger'
    case '已完成':
      return 'success'
    default:
      return ''
  }
}
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
}

.dashboard-header {
  margin-bottom: 20px;
}

.statistic-card {
  height: 100px;
  display: flex;
  align-items: center;
  transition: transform 0.3s;
  border: none;
  margin-bottom: 15px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  padding: 10px 15px;
}

.statistic-icon {
  width: 60px;
  height: 60px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 20px;
  flex-shrink: 0;
}

.statistic-icon .el-icon {
  font-size: 24px;
  color: white;
}

.statistic-content {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}

.statistic-title {
  font-size: 14px;
  color: #606266;
  margin-right: 10px;
  white-space: nowrap;
}

.statistic-value {
  font-size: 22px;
  font-weight: bold;
  color: #303133;
  white-space: nowrap;
  flex: 1;
  text-align: right;
}

.dashboard-main {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.chart-card {
  margin-bottom: 20px;
  transition: all 0.3s;
  border: none;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.chart-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-title {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
}

.chart-container {
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.chart-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.task-card {
  margin-top: 0;
  transition: all 0.3s;
  border: none;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.task-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 表格自定义样式 */
.custom-table {
  --el-table-border-color: #dcdfe6;
  --el-table-header-bg-color: #f5f7fa;
  --el-table-row-hover-bg-color: #f5f7fa;
}

/* Element Plus 样式覆盖 */
:deep(.el-card__header) {
  padding: 15px 20px;
  border-bottom: 1px solid #ebeef5;
}

:deep(.el-button--primary) {
  background-color: #67c23a;
  border-color: #67c23a;
}

:deep(.el-button--primary:hover) {
  background-color: #66b1ff;
  border-color: #66b1ff;
}

:deep(.el-radio__input.is-checked .el-radio__inner) {
  background-color: #67c23a;
  border-color: #67c23a;
}

:deep(.el-radio__input.is-checked + .el-radio__label) {
  color: #67c23a;
}

:deep(.el-table th) {
  background-color: #f5f7fa !important;
  color: #303133 !important;
  font-weight: bold !important;
  font-size: 14px !important;
}

:deep(.el-table td) {
  padding: 12px 0;
  color: #303133;
  font-size: 14px;
}

:deep(.el-empty__description) {
  color: #909399;
}

:deep(.el-button--primary.is-plain) {
  color: #67c23a;
  border-color: #d9ecff;
  background-color: #ecf5ff;
}

:deep(.el-button--primary.is-plain:hover) {
  color: #66b1ff;
  border-color: #a0cfff;
  background-color: #ecf5ff;
}

:deep(.el-table__header) {
  font-weight: bold;
}

:deep(.el-tag) {
  font-weight: bold;
}

:deep(.el-tag.el-tag--primary) {
  background-color: #ecf5ff;
  border-color: #d9ecff;
  color: #67c23a;
}

:deep(.el-tag.el-tag--success) {
  background-color: #f0f9eb;
  border-color: #e1f3d8;
  color: #67c23a;
}

:deep(.el-tag.el-tag--danger) {
  background-color: #fef0f0;
  border-color: #fde2e2;
  color: #f56c6c;
}

:deep(.el-tag.el-tag--warning) {
  background-color: #fdf6ec;
  border-color: #faecd8;
  color: #e6a23c;
}

:deep(.el-tag.el-tag--info) {
  background-color: #f4f4f5;
  border-color: #e9e9eb;
  color: #909399;
}

:deep(.el-card) {
  border-radius: 8px;
  overflow: hidden;
}

@media (max-width: 768px) {
  .statistic-card {
    margin-bottom: 15px;
  }

  .chart-card {
    margin-bottom: 15px;
  }
}
</style>
